import { Bar } from '@ant-design/charts';

interface Score {
    id: number;
    progress: number;
    score: number | null;
    completionTime: string | null;
    easyType: number | null;
    remark: string | null;
    workId: number;
}

interface Props {
    scores: Score[];
}

const ScoreAnalysis: React.FC<Props> = ({ scores }) => {
    const scoreCounts = Array.from({ length: 10 }, () => 0);

    scores.forEach((score) => {
        if (!score.score) {
            return;
        }

        const scoreRange = Math.floor(score.score / 10);
        scoreCounts[scoreRange] += 1;
    });

    const scoreRanges = Array.from({ length: 10 }, (v, i) => `${i * 10}-${(i + 1) * 10}`);

    const data = scoreRanges.map((range, index) => ({
        range,
        count: scoreCounts[index],
    }));

    return (
        <Bar
            data={data}
            xField="count"
            yField="range"
            height={400}
            xAxis={{
                max: Math.max(...scoreCounts),
            }}
        />
    );
};

export default ScoreAnalysis;